<template>
  <layout-empty>
    <view class="home-bg"></view>
    <view class="app-container home-container flex flex-column">
      <view class="welcome mt3 flex-shrink-0">欢迎登录华信管理平台~</view>
      <view class="welcome-user-box flex-shrink-0 flex flex-row justify-between align-center mt4.8">
        <view class="wu-left">
          <view class="username">你好，{{ userInfo.displayName }}</view>
        </view>
        <view class="wu-logout flex-row align-center">
          <image @click="openMsg" class="logout-image ml1" :src="logoutPng"></image>
        </view>
      </view>
      <view class="app-list flex-grow-1">
        <scroll-view :scroll-y="true" :show-scrollbar="false">
          <view style="padding-top: 10px">
            <view v-for="(item, idx) in appList" :key="`app_`+idx" class="app-box" @click="gotoApp(item.route)">
              <view class="app__body flex flex-row">
                <view class="app-content flex-grow-1">
                  <view class="app-name">{{ item.name }}</view>
                  <view class="app-icon-goto flex justify-center align-center">
                    <uni-icons class="icon-goto" color="#fff" type="arrow-right" size="20"></uni-icons>
                  </view>
                </view>
                <view class="app-logo flex-shrink-0" :style="{backgroundImage: `url(${item.icon})`}" />
              </view>
            </view>
          </view>
        </scroll-view>
      </view>
    </view>
  </layout-empty>
  <g-message ref="logoutMsg" @confirm="logout" msg="退出登录" />
</template>

<script lang="ts" setup>
import LayoutEmpty from "@/layouts/empty.vue";
import {useLoginStore, useUserStore} from "@/stores";
import {storeToRefs} from "pinia";
import logoutPng from '@/static/images/passkey/logout.svg'
import {PmTabBarType} from "@/enum";
import {usePmAppStore} from "@/stores/pm";

defineOptions({
  name: 'Home',
})

const {userInfo} = storeToRefs(useUserStore())

const logoutMsg = ref();
function openMsg() {
  logoutMsg.value.open();
}

function logout() {
  useLoginStore().logout().then(() => {
    logoutMsg.value.close();
  })
}

function gotoApp(route: any) {
  if (route) {
    route();
  }
}

import BoxSvg from '@/static/images/passkey/box.svg'
import MessageSvg from '@/static/images/passkey/message.svg'
const appList = [
  {
    name: '华信OA管理系统',
    icon: BoxSvg,
    route: () => {
      // useOaAppStore().setTabKey(OaTabBarType.TODO);
      // uni.navigateTo({ url: '/oaPages/index/index' });
      uni.showToast({
        icon: 'none',
        title: '系统开发中...'
      })
    },
    key: null,
  },
  {
    name: '华信项目管理系统',
    icon: MessageSvg,
    route: () => {
      usePmAppStore().setTabKey(PmTabBarType.PROJECT);
      uni.navigateTo({ url: '/pmPages/index/index' });
    },
    key: null,
  },
]
</script>

<style lang="scss" scoped>
.home-container {
  .welcome {
    font-size: 20px;
    font-weight: 500;
    line-height: normal;
    letter-spacing: 0em;
    color: #FFFFFF;
  }

  $wu-height: 56rpx;
  .welcome-user-box {
    height: $wu-height;
    margin-right: 30rpx;

    .username {
      font-size: 16px;
      font-weight: normal;
      letter-spacing: 0em;
      color: #FFFFFF;
      line-height: $wu-height;
    }

    .logout-content {
      font-size: 16px;
      font-weight: normal;
      letter-spacing: 0em;
      color: #FFFFFF;
      //line-height: normal;
      color: rgba(255, 255, 255, 0.6);
      line-height: 40rpx;
    }

    .logout-image {
      width: 40rpx;
      height: 40rpx;
    }
  }

  .app-list {
    margin-top: 60rpx;
    overflow: auto;

    .app-box {
      padding: 16rpx;
      box-sizing: border-box;
      margin-top: 40rpx;

      .app__body {
        box-shadow: 0px 0px 12px rgba(0, 0, 0, .12);
        border-radius: 24rpx;
        background-color: #fff;
        width: 100%;
        height: 226rpx;
        padding: 52rpx 42rpx 24rpx;
        box-sizing: border-box;

        .app-name {
          font-size: 36rpx;
          font-weight: 700;
          line-height: normal;
          letter-spacing: 0em;
          color: #333333;
        }

        .app-icon-goto {
          width: 74rpx;
          height: 74rpx;
          background-color: #CFD6FE;
          border-radius: 50%;
          margin-top: 26rpx;
        }

        .app-logo {
          width: 260rpx;
          height: 240rpx;
          background-size: 100% 100%;
          position: relative;
          top: -120rpx;
          right: -42rpx;
        }
      }

      //&:first-child {
      //  margin-top: 0;
      //}
    }
  }
}

@import 'src/styles/bg/homeBg';
.home-bg {
  position: absolute;
  top: 0;
  left: 0;
  background-image: $--home-bg;
  background-repeat: no-repeat;
  background-size: 100% auto;
  z-index: 1;
  width: 100%;
  height: 100%;
}
</style>
